<div id="login" style="width: 200px; margin: 0 auto;">
	<input title="Username" id="username" type="text" maxlength="12" value="unnown" /><br />
	<input title="Password" id="password" type="password" maxlength="8" value="az61tl" /><br />
	<button type="button" id="login">Login</button>        
	<p id="message"></p>
	{{=it.title}}
</div>

<script>
	$(function(){
		var socket = io.connect();

		socket.on('error', function (reason){
		  console.error('Unable to connect Socket.IO', reason);
		});			

		socket.on('connect', function () {				
			$("#message").text('Connected');

			socket.on('message', function(message) {
				$("#message").text(message);
			});
			
			socket.on('disconnect', function() {
				$("#message").text('Disconnected');
			});

			socket.on('loginsucces', function (userdata) {  
				$("#message").text('Login succeeded for: ' + userdata.username);                    
				window.location.href = 'Main';
			});				
			
			socket.on('loginfailed', function () {
				$("#message").text('Login failed');
			});		

			$('#login').click(function(){
				socket.emit('login', { username: $("#login #username").val(), password: $("#login #password").val() });
			});					
		});
	});
</script> 